<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>陈四湖的在线简历</title>
    <link rel="stylesheet" href="./style/style.css">
    <script src="//at.alicdn.com/t/font_1652269_37xc85zvi2v.js"></script>
</head>

<body>
    <div class="layout" id="page">

        <main class="left">
            <div class="big-header experience">
                <div class="header-wrapper">
                    <div class="main-header">项目经验</div>
                    <div class="vice-header">Experience</div>
                </div>
            </div>
            <div class="small-header project">
                <div class="main-header">小程序项目</div>
                <!--加减乘除小程序-->
                <div class="code-href">
                    <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-original-code"></use>
            </svg>
                    <a href="https://gitee.com/sky19980208/arithmetic" target="_blank">项目源码</a>
                </div>
            </div>
            <div class="content">
                <div class="content-wrapper">
                    <div class="content-header">加减乘除小程序</div>
                    <ul class="content-main">
                        <li class="item">项目介绍: 一个可以设置难度、自动出题的小程序，并且提供了屏幕常亮的功能，有助于改善用户的使用体验。本项目采用 <span class="background-code">uni-app</span> 进行页面的开发，利用 <span class="background-code">provide/inject</span> 以及 <span class="background-code">Vuex</span> 来进行组件之间的通信，通过调用API接口
                            <span class="background-code">uni.setStorage</span> 将用户的设置信息保存在本地缓存中</li>
                        <li class="item">负责工作: 负责整个项目的开发工作</li>
                        <li class="item">
                            <span>技术框架: </span><span class="detail-skills">uni-app/Vue/Vuex/SCSS</span>
                        </li>
                        <li class="item mp-qrcode-wrapper">
                            备注: 项目已上线，欢迎扫码体验
                            <div id="mp-todo"></div>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="small-header project">
                <div class="main-header">移动端项目</div>
                <!--模拟商城-->
                <div class="code-href">
                    <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-original-code"></use>
          </svg>
                    <a href="https://gitee.com/sky19980208/simulation_mall" target="_blank">项目源码</a>
                </div>
                <div class="code-href back-end">
                    <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-code"></use>
            </svg>
                    <a href="http://sky19980208.gitee.io/simulation_mall" target="_blank">Demo</a>
                </div>
            </div>
            <div class="content">
                <div class="content-wrapper">
                    <div class="content-header">模拟商城</div>
                    <ul class="content-main">
                        <li class="item">项目介绍: 一个基于Vue全家桶开发的移动端商城，目前已经完成了“首页”、“商品详情页”和“购物车页面”的开发，实现了查看商品详情以及加入购物车等功能</li>
                        <li class="item">负责工作: 利用 <span class="background-code">mock.js</span> 在本地模拟商品的详情数据，然后通过 <span class="background-code">props</span> 和 <span class="background-code">Vuex</span> 进行组件之间的通信。并利用 <span class="background-code">FastClick</span> 解决了移动端300ms延迟的问题</li>
                        <li class="item">
                            <span>技术框架: </span><span class="detail-skills">Vue/Vuex/axios</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="small-header project">
                <div class="main-header">网页端项目</div>
                <!--算术练习-->
                <div class="code-href">
                    <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-original-code"></use>
        </svg>
                    <a href="https://gitee.com/sky19980208/number_work" target="_blank">项目源码</a>
                </div>
                <div class="code-href back-end">
                    <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-code"></use>
        </svg>
                    <a href="http://sky19980208.gitee.io/number_work" target="_blank">Demo</a>
                </div>
            </div>
            <div class="content">
                <div class="content-wrapper">
                    <div class="content-header">算术练习</div>
                    <ul class="content-main">
                        <li class="item">项目介绍: 一个轻量级的单页面应用，实现了选择难度、自动出题等功能</li>
                        <li class="item">负责工作: 负责整个项目的开发工作</li>
                        <li class="item">
                            <span>技术框架: </span><span class="detail-skills">Vue/Vuex</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="small-header project">
                <div class="main-header">网页端项目</div>
                <!--个人网站-->
                <div class="code-href">
                    <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-original-code"></use>
        </svg>
                    <a href="https://gitee.com/sky19980208/my_website" target="_blank">项目源码</a>
                </div>
                <div class="code-href back-end">
                    <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-code"></use>
          </svg>
                    <a href="http://sky19980208.gitee.io/my_website" target="_blank">Demo</a>
                </div>
            </div>
            <div class="content">
                <div class="content-wrapper">
                    <div class="content-header">个人网站</div>
                    <ul class="content-main">
                        <li class="item">项目介绍: 一个简单的个人在线网站，包含了“技术博客”、“实用项目”、“视频创作”、“兴趣爱好”四大展示板块</li>
                        <li class="item">负责工作: 负责整个项目的开发工作</li>
                        <li class="item">
                            <span>技术框架: </span><span class="detail-skills">Vue/axios</span>
                        </li>
                    </ul>
                </div>
            </div>

        </main>
        <main class="right">
            <div class="big-header information">
                <div class="header-wrapper">
                    <div class="main-header">个人信息</div>
                    <div class="vice-header">Information</div>
                </div>
            </div>
            <div class="small-header thumb-up">
                <div class="main-header">基本信息</div>
            </div>
            <div class="content">
                <div class="content-wrapper">
                    <ul class="content-main">
                        <li class="item star">
                            应聘职位：<span class="detail-skills">前端开发工程师 | 成都</span>
                        </li>
                        <li class="item star">
                            <span class="detail-skills">陈四湖 / 22 / 男</span>
                        </li>
                        <li class="item star">
                            手机：<span class="detail-skills">17628165407(微信同号)</span>
                        </li>
                        <li class="item star">
                            邮箱：<span class="detail-skills">1370344136@qq.com</span>
                        </li>
                        <li class="item star">
                            博客：<a class="detail-skills" href="https://www.jianshu.com/u/23749041c9c0" target="_blank">点击跳转至简书个人主页</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="small-header education">
                <div class="main-header">教育背景</div>
            </div>
            <div class="content">
                <div class="content-wrapper">
                    <div class="content-header detail-skills">成都理工大学工程技术学院</div>
                    <ul class="content-main">
                        <li class="item hat">学制: 全日制本科</li>
                        <li class="item hat">专业: 电气工程及其自动化</li>
                        <li class="item hat">时间: 2016-09 ~ 2020-06</li>
                    </ul>
                </div>
            </div>

            <div class="big-header skills not-first">
                <div class="header-wrapper">
                    <div class="main-header">技能</div>
                    <div class="vice-header">Skills</div>
                </div>
            </div>
            <div class="small-header front-end">
                <div class="main-header">Web 前端</div>
            </div>
            <div class="content">
                <div class="content-wrapper">
                    <div class="content-header detail-skills">ECMAScript(Javascript)</div>
                    <ul class="content-main">
                        <li class="item star">
                            熟练使用
                            <span class="detail-skills">ECMAScript</span> 进行编程，熟悉
                            <span class="detail-skills">ES6</span> 的常用语法
                        </li>
                        <li class="item star">熟悉面向对象的编程思想</li>
                    </ul>
                </div>
            </div>
            <div class="content">
                <div class="content-wrapper">
                    <div class="content-header detail-skills">DOM / BOM</div>
                    <ul class="content-main">
                        <li class="item star">
                            熟悉原生
                            <span class="detail-skills">DOM</span> 与
                            <span class="detail-skills">BOM</span> 的使用及相关标准，有前端组件的开发经验
                        </li>
                        <li class="item star">有前端组件封装的开发经验</li>
                    </ul>
                </div>
            </div>
            <div class="content">
                <div class="content-wrapper">
                    <div class="content-header detail-skills">前端工程实战</div>
                    <ul class="content-main">
                        <li class="item star">
                            熟悉
                            <span class="detail-skills">Vue.js</span> 使用，了解前端
                            <span class="detail-skills">MVC</span> 模型
                        </li>
                        <li class="item star">
                            使用
                            <span class="detail-skills">uniapp</span> 开发过小程序
                        </li>
                        <li class="item star">
                            在项目中使用
                            <span class="detail-skills">SCSS</span> /
                            <span class="detail-skills">Sass</span> 预处理器
                        </li>
                    </ul>
                </div>
            </div>
            <div class="small-header back-end">
                <div class="main-header">Web 后端</div>
            </div>
            <div class="content last">
                <div class="content-wrapper">
                    <div class="content-header detail-skills">HTTP</div>
                    <ul class="content-main">
                        <li class="item star">
                            了解
                            <span class="detail-skills">HTTP</span> 在客户端与服务端之间的通信过程
                        </li>
                        <li class="item star">
                            具备基本的
                            <span class="detail-skills">Web安全</span> 知识 (
                            <span class="detail-skills">XSS/CSRF</span> )
                        </li>
                    </ul>
                </div>
            </div>
            <div class="big-header about-me not-first">
                <div class="header-wrapper">
                    <div class="main-header">备注</div>
                    <div class="vice-header">Remarks</div>
                </div>
            </div>
            <div class="small-header note">
                <div class="main-header">在线简历</div>
            </div>
            <div class="content last">
                <div class="content-wrapper">
                    <ul class="content-main">
                        <li class="item star">
                            简历在线地址:
                            <a class="detail-skills" href="http://www.170sky.online" target="_blank">http://www.170sky.online</a>
                        </li>
                        <li class="item star">
                            可在手机电脑线上简历访问本页项目
                        </li>
                    </ul>
                </div>
            </div>
        </main>
    </div>
</body>

</html>